<template>
  <div>
    <Row>
      <Col span="11">
        <div id="cloth" :style="{width: '300px', height: '300px'}"></div>
      </Col>
      <Col span="11" offset="2">
        <div id="circle" :style="{width: '600px', height: '400px'}"></div>
      </Col>
    </Row>

    <Row>
      <Col span="11" >
        <div id="circle2" :style="{width: '300px', height: '300px'}"></div>
      </Col>
      <Col span="11">
        <div id="Round" :style="{width: '300px', height: '300px'}"></div>
      </Col>
    </Row>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      msg: "Welcome to Your Vue.js App",
    };
  },
  mounted() {
    this.drawLine();
  },
  methods: {
    drawLine() {
      // 基于准备好的dom，初始化echarts实例
      let cloth = this.$echarts.init(document.getElementById("cloth"));
      // 绘制图表
      cloth.setOption({
        title: { text: "衣服销量" },
        tooltip: {},
        xAxis: {
          data: ["衬衫", "羊毛衫", "雪纺衫", "裤子", "高跟鞋", "袜子"],
        },
        yAxis: {},
        series: [
          {
            name: "销量",
            type: "bar",
            data: [5, 20, 36, 10, 10, 20],
          },
        ],
      });

      var circle = this.$echarts.init(document.getElementById("circle"));

      circle.setOption({
        title: { text: "网站流量" },
        series: [
          {
            name: "访问来源",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "视频广告" },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" },
            ],
          },
        ],
      });

      var circle2 = this.$echarts.init(document.getElementById("circle2"));

      circle2.setOption({
        title: { text: "网站流量" },
        series: [
          {
            name: "访问来源",
            type: "pie", // 设置图表类型为饼图
            radius: "55%", // 饼图的半径，外半径为可视区尺寸（容器高宽中较小一项）的 55% 长度。
            roseType: "angle",
            data: [
              // 数据数组，name 为数据项名称，value 为数据项值
              { value: 235, name: "视频广告" },
              { value: 274, name: "联盟广告" },
              { value: 310, name: "邮件营销" },
              { value: 335, name: "直接访问" },
              { value: 400, name: "搜索引擎" },
            ],
          },
        ],
      });

      let Round = this.$echarts.init(document.getElementById("Round"));

      Round.setOption({
        angleAxis: {},
        radiusAxis: {
          type: "category",
          data: ["周一", "周二", "周三", "周四"],
          z: 10,
        },
        polar: {},
        series: [
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "A",
            stack: "a",
          },
          {
            type: "bar",
            data: [2, 4, 6, 8],
            coordinateSystem: "polar",
            name: "B",
            stack: "a",
          },
          {
            type: "bar",
            data: [1, 2, 3, 4],
            coordinateSystem: "polar",
            name: "C",
            stack: "a",
          },
        ],
        legend: {
          show: true,
          data: ["A", "B", "C"],
        },
      });
    },
  },
};
</script>

<style>
</style>